<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
	<style>
		/* 外边距？所有元素具备边框，边框以外距离，四个，上下 左右 【微小的偏移】
		外边距问题1：行内元素：a,i\delete..只支持左右边距
		            布局，支持左右推动效果
					  解决方案：行转块
		常用margin属性；两个属性值； margin:0  auto;  居中
		*/
		span{
			border: 1px solid red;
			/* margin外边距属性：1个属性值：上 右 下 左*/
			margin: 300px;/*？ 上下 左右    上下效果没有 ?*/
			/*margin外边距属性：2个属性值：上下 左右*/
			margin: 100px 200px ;
			/*margin外边距属性：3个属性值：上 右左 下 */  
			margin: 100px 200px 300px;
			/*margin外边距属性：3个属性值：上 右 下 左*/
			margin: 100px 200px 300px 400px ;
			/*常用属性：自适应居中*/
			margin:auto;
			margin-left: 800px; 
		}
		/*外边距问题2：外边距合并问题
		上下元素都存在外边距，垂直以最大外边距为主
		外边距垂直合并：最大外边距为主，怎么解决？
		推荐：1.margin设置一个值，上下会垂直，去掉一个上下元素其中上、下外边距 重新计算
		     2.padding代替margin
			 
		*/
		#parent{
			width: 200px;
			height: 200px;
			background: #ff5500;
			margin-top: 30px;
			/*父元素：border:1px solid transparent */
			bo rder : 1px solid transparent
			/*父元素：overflow:hidden;创建新块级上下文，阻止外边距合并*/
			
		}
		#child{
			margin-top: 30px;
			width: 100px;
			height: 100px;
			background: #00ffff;
			
			
		}
		</style> 
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
		   <div id="child"></div>
		</div>
		<hr>
		<!--元素：存在于框模型=外边距+边框+内边距+内容
		 有些元素默认外边距，处理方案：通配选择器，去掉元素外边距
		 -->
	<span>行内元素</span>
	<h1>块元素</h1>
	/*测试外边距*/
	/* ul li √
	   form input ×
	   table tr td ×
	   p √
	   
	   */
	
	
	</body>
</html>